<template>
	<view >
		<scroll-view scroll-y :style="contentStyle" :show-scrollbar="true">
			<view v-if="isShowHome">
				<home-comp-vue></home-comp-vue>
			</view>
			<view v-if="false">
				<my-shopping-cart></my-shopping-cart>
			</view>
			<view v-if="isShowMine">
				<account-comp-vue></account-comp-vue>
			</view>
		</scroll-view>
		
		<view :style="tabbarStyle" >
			<u-row   justify="space-between" align="right" >
				<u-col :span="2" justify="center" @click="toShowHome"    customStyle="padding-top: 8px;padding-left:24px;">
					<u-icon name="home"  size="40" :color="homeShowColor"></u-icon>
				</u-col>
				
				<u-col v-if="false" :span="3" justify="center" @click="toShoppingCart"   customStyle="padding-top: 8px;padding-left:24px;">
					<u-icon name="shopping-cart"  size="40" :color="shoppingCartColor"></u-icon>
				</u-col>
				
				<u-col :span="2" align="right" @click="toMine"  justify="flex-end" customStyle="padding-top:8px;">
					<u-icon name="account"  size="40" :color="myShowColor"></u-icon>
				</u-col>
			</u-row>
			
			
			
			
			
			<u-row  justify="space-between" align="right">
				<u-col :span="2" justify="center" @click="toShowHome"  customStyle="padding-top: 4px;padding-left:24px;">
					<text :class="homeShowText"   >主页</text>
				</u-col>
				
				<u-col :span="3"  v-if="false"  justify="center" @click="toShowHome"  customStyle="padding-top: 4px;padding-left:18px;">
					<text :class="shoppingCartText"   >购物车</text>
				</u-col>
				
				
				<u-col :span="2" align="right" @click="toMine" justify="flex-end" customStyle="padding-top:4px;">
					<text :class="myShowText" >我的</text>
				</u-col>
			</u-row>
		</view>
		
		
		
	</view>
</template>

<script>

	import HomeCompVue from '../home/HomeComp.vue';
	import AccountCompVue from '../account/AccountComp.vue';
	import MyShoppingCart from '../myshoppingcart/MyShoppingCart.vue'
	export default{
		components:{
			HomeCompVue,
			AccountCompVue,
			MyShoppingCart
		},
		data(){
			return{
				windowHeight:100,
				tabbarStyle:'margin-top:'+this.windowHeight+'px',
				contentStyle:'',
				selectedColor:'#2979ff',
				unSelectedColor:'#000000',
				isShowHome:true,
				isShowShoppingCart:false,
				isShowMine:false,
				homeShowText:'',
				homeShowColor:'',
				myShowText:'',
				myShowColor:'',
				shoppingCartText:'',
				shoppingCartColor:''
			}
		},
		onShow() {
			let that=this;
			uni.getSystemInfo({
				success:function(info){
					that.windowHeight=info.windowHeight;
					that.setStyle();
				}
			});
		},
		onReady() {
			this.toShowHome();
		},
		methods:{
		
			setStyle(){
				this.contentStyle='height:'+(this.windowHeight-60)+'px; ';
			},
			toShowHome(){
				this.isShowHome=true;
				this.homeShowColor=this.selectedColor;
				this.homeShowText="selected-text";
				this.isShowMine=false;
				this.myShowColor=this.unSelectedColor;
				this.myShowText="unselected-text";
				
				this.isShowShoppingCart=false;
				this.shoppingCartText="unselected-text";
				this.shoppingCartColor=this.unSelectedColor;
				uni.setNavigationBarTitle({
					title:"主页"
				});
				
			},
			toMine(){
				this.isShowHome=false;
				this.homeShowColor=this.unSelectedColor;
				this.homeShowText="unselected-text";
				this.isShowMine=true;
				this.myShowColor=this.selectedColor;
				this.myShowText="selected-text";
				
				this.isShowShoppingCart=false;
				this.shoppingCartText="unselected-text";
				this.shoppingCartColor=this.unSelectedColor;
				uni.setNavigationBarTitle({
					title:"我的"
				});
			},
			toShoppingCart(){
				this.isShowHome=false;
				this.homeShowColor=this.unSelectedColor;
				this.homeShowText="unselected-text";
				
				this.isShowMine=false;
				this.myShowColor=this.unSelectedColor;
				this.myShowText="unselected-text";
				
				this.isShowShoppingCart=true;
				this.shoppingCartText="selected-text";
				this.shoppingCartColor=this.selectedColor;
				uni.setNavigationBarTitle({
					title:"购物车"
				});
			}
		}
		
	}
</script>

<style>
	.unselected-text{
		font-size: 12px;
		color: rgb(0, 0, 0)
	}
	.selected-text{
		font-size: 12px;
		color: rgb(55,152, 251)
	}
	
</style>